<template>
  <div class="welcome-container">
    <!-- 皮影戏传统幕布背景 -->
    <div class="shadow-play-stage"></div>
    
    <!-- 内容区域 -->
    <div class="content">
      <h1 class="welcome-title">影韵华彩</h1>
      <button class="explore-button" @click="goToHome">探索中国传统艺术之美</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isLoaded = ref(false)

// 跳转到主页（使用replace避免返回欢迎页）
const goToHome = () => {
  // 标记已访问欢迎页
  localStorage.setItem('hasVisitedWelcome', 'true')
  router.replace('/home')
}

// 页面加载后触发动画
onMounted(async () => {
  await nextTick()
  // 延迟一小段时间确保DOM已渲染
  setTimeout(() => {
    isLoaded.value = true
  }, 100)
})
</script>

<style scoped>
/* 全局容器 */
.welcome-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0a0a0a;
}

/* 皮影戏传统幕布背景 */
.shadow-play-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 215, 126, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 215, 126, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, rgba(10, 10, 10, 0.8) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(10, 10, 10, 0.8) 100%);
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.8);
  animation: stageLight 10s ease-in-out infinite alternate;
}

/* 模拟幕布质感的纹理 */
.shadow-play-stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.3;
  pointer-events: none;
}

/* 模拟舞台灯光效果 */
.shadow-play-stage::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(circle, 
    rgba(255, 215, 126, 0.2) 0%, 
    rgba(255, 215, 126, 0.1) 30%, 
    rgba(0, 0, 0, 0) 70%);
  animation: spotlightMove 15s ease-in-out infinite alternate;
  pointer-events: none;
}

/* 内容区域 */
.content {
  position: relative;
  z-index: 2;
  text-align: center;
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  animation: contentEnter 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.3s;
}

/* 毛笔书法字体标题 */
.welcome-title {
  font-size: 6rem;
  margin: 0 0 2.5rem 0;
  color: #f9d77e;
  font-family: 'Ma Shan Zheng', 'STZhongsong', 'SimSun', serif;
  text-shadow: 
    0 0 10px rgba(249, 215, 126, 0.5),
    0 0 20px rgba(249, 215, 126, 0.3),
    3px 3px 6px rgba(0, 0, 0, 0.7);
  letter-spacing: 10px;
  padding: 0;
  background: none;
  position: relative;
  display: inline-block;
}

/* 标题光芒效果 */
.welcome-title::before {
  content: '影韵华彩';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: transparent;
  background: linear-gradient(45deg, transparent 0%, rgba(249, 215, 126, 0.3) 50%, transparent 100%);
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
  animation: titleShine 3s ease-in-out infinite;
}

/* 探索按钮 */
.explore-button {
  background: linear-gradient(135deg, rgba(249, 215, 126, 0.1) 0%, rgba(249, 215, 126, 0.2) 100%);
  border: 2px solid #f9d77e;
  color: #f9d77e;
  padding: 1.2rem 3rem;
  font-size: 1.3rem;
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: 'STKaiti', 'KaiTi', serif;
  letter-spacing: 3px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(249, 215, 126, 0.2);
}

/* 按钮悬浮效果 */
.explore-button:hover {
  background: linear-gradient(135deg, #f9d77e 0%, #e6c35c 100%);
  color: #1a1a1a;
  transform: scale(1.08) translateY(-2px);
  box-shadow: 
    0 10px 30px rgba(249, 215, 126, 0.4),
    0 0 40px rgba(249, 215, 126, 0.3);
  letter-spacing: 5px;
}

/* 按钮点击效果 */
.explore-button:active {
  transform: scale(1.05);
}

/* 按钮光效 */
.explore-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: rotate(45deg);
  animation: buttonShine 3s infinite;
}

/* 动画定义 */
@keyframes stageLight {
  0% {
    background-color: #1a1a1a;
  }
  100% {
    background-color: #2a2a2a;
  }
}

@keyframes spotlightMove {
  0% {
    transform: translateX(-60%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateX(-40%) scale(1.1);
    opacity: 0.8;
  }
}

@keyframes contentEnter {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes titleShine {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes buttonShine {
  0% {
    left: -100%;
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    left: 100%;
    opacity: 0.3;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-title {
    font-size: 4rem;
    margin-bottom: 2rem;
    letter-spacing: 8px;
  }
  
  .explore-button {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    letter-spacing: 2px;
  }
}

@media (max-width: 480px) {
  .welcome-title {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    letter-spacing: 5px;
  }
  
  .explore-button {
    padding: 0.8rem 2rem;
    font-size: 1rem;
    letter-spacing: 1px;
  }
}
</style>